React useLayoutEffect：同步 DOM 测量与更新

React 提供了强大的钩子来管理组件中的副作用。虽然 useEffect 是处理大多数异步副作用的主力，但当您需要执行同步的 DOM 测量和更新时，useLayoutEffect 就派上用场了。本指南深入探讨 useLayoutEffect，解释其用途、使用场景以及如何有效地使用它。

理解同步 DOM 更新的必要性

在深入了解 useLayoutEffect 的具体细节之前，理解为什么有时需要同步的 DOM 更新至关重要。浏览器渲染管线包括几个阶段，例如：

• 解析 HTML：将 HTML 文档转换为 DOM 树。
• 渲染：计算 DOM 中每个元素的样式和布局。
• 绘制：将元素绘制到屏幕上。

React 的 useEffect 钩子在浏览器绘制屏幕后异步运行。这通常是出于性能考虑，因为它能防止阻塞主线程，让浏览器保持响应。然而，在某些情况下，您需要在浏览器绘制前测量 DOM，然后在用户看到初始渲染之前根据这些测量结果更新 DOM。例如：

• 根据工具提示的内容大小和可用的屏幕空间调整其位置。
• 计算元素的高度以确保其能容纳在容器内。
• 在滚动或调整大小时同步元素的位置。

如果您对这些类型的操作使用 useEffect，可能会遇到视觉闪烁或抖动，因为浏览器在 useEffect 运行并更新 DOM 之前会先绘制初始状态。这就是 useLayoutEffect 发挥作用的地方。

useLayoutEffect 介绍

useLayoutEffect 是一个与 useEffect 类似的 React 钩子，但它在浏览器执行完所有 DOM 变更之后、在屏幕绘制之前同步运行。这使您可以在不引起视觉闪烁的情况下读取 DOM 测量值并更新 DOM。以下是基本语法：

import { useLayoutEffect } from 'react';

function MyComponent() {
  useLayoutEffect(() => {
    // 在 DOM 变更后、浏览器绘制前运行的代码

    // 可选：返回一个清理函数
    return () => {
      // 在组件卸载或重新渲染时运行的代码
    };
  }, [dependencies]);

  return (
    

      {/* 组件内容 */}
    
  );
}

与 useEffect 一样，useLayoutEffect 接受两个参数：

1. 一个包含副作用逻辑的函数。
2. 一个可选的依赖项数组。只有当其中一个依赖项发生变化时，副作用才会重新运行。如果依赖项数组为空 ([])，副作用只会在初始渲染后运行一次。如果不提供依赖项数组，副作用将在每次渲染后都运行。

何时使用 useLayoutEffect

理解何时使用 useLayoutEffect 的关键是识别那些需要在浏览器绘制前同步执行 DOM 测量和更新的场景。以下是一些常见的用例：

1. 测量元素尺寸

您可能需要测量一个元素的宽度、高度或位置，以计算其他元素的布局。例如，您可以使用 useLayoutEffect 来确保工具提示始终位于视口内。

import React, { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const [isVisible, setIsVisible] = useState(false);
  const tooltipRef = useRef(null);
  const buttonRef = useRef(null);

  useLayoutEffect(() => {
    if (isVisible && tooltipRef.current && buttonRef.current) {
      const buttonRect = buttonRef.current.getBoundingClientRect();
      const tooltipWidth = tooltipRef.current.offsetWidth;
      const windowWidth = window.innerWidth;

      // 计算工具提示的理想位置
      let left = buttonRect.left + (buttonRect.width / 2) - (tooltipWidth / 2);

      // 如果工具提示会溢出视口，则调整位置
      if (left < 0) {
        left = 10; // 距离左边缘的最小边距
      } else if (left + tooltipWidth > windowWidth) {
        left = windowWidth - tooltipWidth - 10; // 距离右边缘的最小边距
      }

      tooltipRef.current.style.left = `${left}px`;
      tooltipRef.current.style.top = `${buttonRect.bottom + 5}px`;
    }
  }, [isVisible]);

  return (
    

       setIsVisible(!isVisible)}>Toggle Tooltip
      {isVisible && (
        

          这是一个工具提示消息。
        
      )}
    
  );
}

在此示例中，useLayoutEffect 用于根据按钮的位置和视口尺寸计算工具提示的位置。这确保了工具提示始终可见且不会溢出屏幕。getBoundingClientRect 方法用于获取按钮相对于视口的尺寸和位置。

2. 同步元素位置

您可能需要将一个元素的位置与另一个元素同步，例如一个吸顶标题栏，它会随着用户滚动而跟随。同样，useLayoutEffect 可以确保在浏览器绘制之前元素已正确对齐，从而避免任何视觉抖动。

import React, { useState, useRef, useLayoutEffect } from 'react';

function StickyHeader() {
  const [isSticky, setIsSticky] = useState(false);
  const headerRef = useRef(null);
  const placeholderRef = useRef(null);

  useLayoutEffect(() => {
    const handleScroll = () => {
      if (headerRef.current && placeholderRef.current) {
        const headerHeight = headerRef.current.offsetHeight;
        const headerTop = headerRef.current.offsetTop;
        const scrollPosition = window.pageYOffset;

        if (scrollPosition > headerTop) {
          setIsSticky(true);
          placeholderRef.current.style.height = `${headerHeight}px`;
        } else {
          setIsSticky(false);
          placeholderRef.current.style.height = '0px';
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    

      

      

        
吸顶标题栏
      
      
{/* 一些可滚动的内容 */}
    
  );
}

此示例演示了如何创建一个吸顶标题栏，当用户滚动时它会保持在视口顶部。useLayoutEffect 用于计算标题栏的高度，并设置一个占位符元素的高度，以防止标题栏变为吸顶时内容跳动。offsetTop 属性用于确定标题栏相对于文档的初始位置。

3. 防止字体加载期间的文本跳动

当网页字体加载时，浏览器可能会首先显示备用字体，这会导致自定义字体加载完成后文本重排。useLayoutEffect 可用于计算使用备用字体时文本的高度，并为容器设置一个最小高度，以防止跳动。

import React, { useRef, useLayoutEffect, useState } from 'react';

function FontLoadingComponent() {
  const textRef = useRef(null);
  const [minHeight, setMinHeight] = useState(0);

  useLayoutEffect(() => {
    if (textRef.current) {
      // 使用备用字体测量高度
      const height = textRef.current.offsetHeight;
      setMinHeight(height);
    }
  }, []);

  return (
    

      
这是一些使用自定义字体的文本。
    
  );
}

在此示例中，useLayoutEffect 使用备用字体测量了段落元素的高度。然后，它设置父 div 的 minHeight 样式属性，以防止在自定义字体加载时文本跳动。请将“MyCustomFont”替换为您自定义字体的实际名称。

useLayoutEffect 与 useEffect 的主要区别

useLayoutEffect 和 useEffect 之间最重要的区别在于它们的执行时机：

• useLayoutEffect：在 DOM 变更后、浏览器绘制之前同步运行。这会阻塞浏览器绘制，直到副作用执行完毕。
• useEffect：在浏览器绘制屏幕后异步运行。这不会阻塞浏览器绘制。

因为 useLayoutEffect 会阻塞浏览器绘制，所以应该谨慎使用。过度使用 useLayoutEffect 可能会导致性能问题，特别是当副作用包含复杂或耗时的计算时。

下表总结了主要区别：

特性	useLayoutEffect	useEffect
执行时机	同步（绘制前）	异步（绘制后）
阻塞	阻塞浏览器绘制	非阻塞
用例	需要同步执行的 DOM 测量和更新	大多数其他副作用（API 调用、计时器等）
性能影响	可能更高（因阻塞）	较低

使用 useLayoutEffect 的最佳实践

为了有效地使用 useLayoutEffect 并避免性能问题，请遵循以下最佳实践：

1. 谨慎使用

仅在绝对需要执行同步 DOM 测量和更新时才使用 useLayoutEffect。对于大多数其他副作用，useEffect 是更好的选择。

2. 保持 effect 函数简短高效

useLayoutEffect 中的 effect 函数应尽可能简短高效，以最小化阻塞时间。避免在 effect 函数中进行复杂的计算或耗时的操作。

3. 明智地使用依赖项

始终为 useLayoutEffect 提供一个依赖项数组。这可以确保副作用只在必要时重新运行。仔细考虑哪些变量应包含在依赖项数组中。包含不必要的依赖项可能导致不必要的重新渲染和性能问题。

4. 避免无限循环

小心不要在 useLayoutEffect 中更新一个同时也是其依赖项的状态变量，从而创建无限循环。这可能导致副作用反复重新运行，使浏览器卡死。如果需要根据 DOM 测量结果更新状态变量，可以考虑使用 ref 来存储测量值，并在更新状态前与先前的值进行比较。

5. 考虑替代方案

在使用 useLayoutEffect 之前，考虑是否有不需要同步 DOM 更新的替代解决方案。例如，您可能可以使用 CSS 来实现所需的布局，而无需 JavaScript 干预。CSS 过渡和动画也可以提供平滑的视觉效果，而无需使用 useLayoutEffect。

useLayoutEffect 与服务器端渲染 (SSR)

useLayoutEffect 依赖于浏览器的 DOM，因此在服务器端渲染 (SSR) 期间使用时会触发警告。这是因为服务器上没有可用的 DOM。为避免此警告，您可以使用条件检查来确保 useLayoutEffect 仅在客户端运行。

import React, { useLayoutEffect, useEffect, useState } from 'react';

function MyComponent() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  useLayoutEffect(() => {
    if (isClient) {
      // 依赖 DOM 的代码
      console.log('useLayoutEffect 在客户端运行');
    }
  }, [isClient]);

  return (
    

      {/* 组件内容 */}
    
  );
}

在此示例中，一个 useEffect 钩子用于在组件挂载到客户端后将 isClient 状态变量设置为 true。然后，useLayoutEffect 钩子仅在 isClient 为 true 时运行，从而防止其在服务器上运行。

另一种方法是使用一个自定义钩子，在 SSR 期间回退到 useEffect：

import { useLayoutEffect, useEffect } from 'react';

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export default useIsomorphicLayoutEffect;

然后，您可以使用 useIsomorphicLayoutEffect 来代替直接使用 useLayoutEffect 或 useEffect。这个自定义钩子检查代码是否在浏览器环境中运行（即 typeof window !== 'undefined'）。如果是，则使用 useLayoutEffect；否则，使用 useEffect。这样，您既可以避免 SSR 期间的警告，又可以在客户端利用 useLayoutEffect 的同步行为。

全局考量与示例

在面向全球用户的应用程序中使用 useLayoutEffect 时，请考虑以下几点：

• 不同的字体渲染：不同操作系统和浏览器的字体渲染可能存在差异。确保您的布局调整在各个平台上都能一致地工作。考虑在各种设备和操作系统上测试您的应用程序，以识别并解决任何差异。
• 从右到左 (RTL) 的语言：如果您的应用程序支持 RTL 语言（如阿拉伯语、希伯来语），请注意 DOM 测量和更新如何影响 RTL 模式下的布局。使用 CSS 逻辑属性（如 margin-inline-start、margin-inline-end）而不是物理属性（如 margin-left、margin-right），以确保正确的布局适应。
• 国际化 (i18n)：不同语言的文本长度可能差异很大。当根据文本内容调整布局时，要考虑到不同语言中可能出现的更长或更短的文本字符串。使用灵活的布局技术（如 CSS flexbox、grid）来适应不同的文本长度。
• 可访问性 (a11y)：确保您的布局调整不会对可访问性产生负面影响。如果 JavaScript 被禁用或用户正在使用辅助技术，请提供访问内容的替代方式。使用 ARIA 属性为您的布局调整的结构和目的提供语义信息。

示例：多语言环境下的动态内容加载与布局调整

想象一个新闻网站，它能动态加载不同语言的文章。每篇文章的布局都需要根据内容的长度和用户的首选字体设置进行调整。以下是 useLayoutEffect 在此场景中的应用方式：

1. 测量文章内容：在文章内容加载并渲染后（但在显示之前），使用 useLayoutEffect 测量文章容器的高度。
2. 计算可用空间：确定屏幕上文章的可用空间，同时考虑页眉、页脚和其他 UI 元素。
3. 调整布局：根据文章的高度和可用空间，调整布局以确保最佳的可读性。例如，您可能需要调整字体大小、行高或列宽。
4. 应用特定语言的调整：如果文章的语言文本字符串较长，您可能需要进行额外的调整以适应增加的文本长度。

通过在这种情况下使用 useLayoutEffect，您可以确保在用户看到文章之前其布局已正确调整，从而防止视觉抖动并提供更好的阅读体验。

结论

useLayoutEffect 是一个在 React 中执行同步 DOM 测量和更新的强大钩子。然而，由于其潜在的性能影响，应谨慎使用。通过理解 useLayoutEffect 和 useEffect 之间的区别，遵循最佳实践，并考虑全局影响，您可以利用 useLayoutEffect 创建流畅且视觉上吸引人的用户界面。

在使用 useLayoutEffect 时，请记住优先考虑性能和可访问性。始终考虑不需要同步 DOM 更新的替代方案，并在各种设备和浏览器上彻底测试您的应用程序，以确保为您的全球用户提供一致且愉快的用户体验。